<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">32,214</div>
                <v-chart :options="searchUserOption"/>
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">193,415</div>
                <v-chart :options="searchNumberOption"/>
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData">
                <el-table-column prop="rank" label="排名"/>
                <el-table-column prop="keyword" label="关键词"/>
                <el-table-column prop="count" label="总搜索量"/>
                <el-table-column prop="users" label="搜索用户数"/>
                <el-table-column prop="range" label="搜索占比"/>
              </el-table>
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                background
                @current-change="onPageChange"
              />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="chart-wrapper">
            <v-chart :options="categoryOptions"/>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
import { search, searchWord, pieData } from '@/api/axiosHttp'
import { pct } from '@/utils'

function chartOption (data, areaColor, lineColor) {
  return data.length ? {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      show: false
    },
    yAxis: {
      show: false,
      min: 0,
      max: 700
    },
    series: [{
      type: 'line',
      data: data,
      areaStyle: {
        color: areaColor
      },
      smooth: true,
      lineStyle: {
        color: lineColor
      },
      itemStyle: {
        opacity: 0
      }
    }],
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }
  } : {}
}

export default {
  name: 'BottomView',
  data () {
    return {
      tableData: [],
      total: 100,
      pageSize: 5,
      radioSelect: '品类',
      searchUser: [],
      searchNumber: [],
      categoryData: [],
      goodsData: []
    }
  },
  computed: {
    searchUserOption () {
      return chartOption(this.searchUser, 'rgba(95,187,255,5)', 'rgb(95,187,255)')
    },
    searchNumberOption () {
      return chartOption(this.searchNumber, 'rgb(226,95,255)', 'rgb(231,95,255)')
    },
    categoryOptions () {
      const data = this.radioSelect === '品类' ? this.categoryData : this.goodsData
      console.log(data)
      return {
        title: [{
          text: this.radioSelect + '分布',
          textStyle: {
            fontsize: 14,
            color: '#666'
          },
          left: 20,
          top: 20
        }, {
          text: '累计订单量',
          subtext: '320',
          x: '25%',
          y: '45%',
          textStyle: {
            fontSize: 14,
            color: '#999'
          },
          subtextStyle: {
            fontSize: 28,
            color: '#333'
          },
          textAlign: 'center'
        }],
        series: [{
          name: '分类',
          type: 'pie',
          data,
          label: {
            show: true,
            position: 'outer',
            formatter (params) {
              return params.data.legendname
            }
          },
          itemStyle: {
            borderWidth: 4,
            borderColor: '#fff'
          },
          center: ['25%', '50%'],
          radius: ['45%', '60%'],
          labelLine: {
            length: 12,
            length2: 10
          }
        }],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          height: 250,
          left: '70%',
          top: 'middle',
          textStyle: {
            color: '#8c8c8c'
          }

        },
        tooltip: {
          trigger: 'item',
          formatter (params) {
            return params.seriesName + '<br/>' + params.marker + params.data.legendname + '<br/>' + '数量: ' +
              params.data.value + '<br/>' + '占比: ' + params.data.percent
          }
        }
      }
    }
  },
  methods: {
    onPageChange (e) {
      searchWord(e - 1, this.pageSize).then(data => {
        this.tableData = data.tableData.map(item => {
          return {
            ...item,
            range: pct(item.range.toFixed(4))
          }
        })
      })
    }
  },
  created () {
    search().then(data => {
      this.searchUser = data.searchUser
      this.searchNumber = data.searchNumber
    })
    searchWord(0, this.pageSize).then(data => {
      this.total = data.total
      this.tableData = data.tableData.map(item => {
        return {
          ...item,
          range: pct(item.range.toFixed(4))
        }
      })
    })
    pieData().then(data => {
      const totalCategory = data[0].reduce((pre, next) => {
        return { value: pre.value + next.value }
      }, { value: 0 })
      const totalGoods = data[1].reduce((pre, next) => {
        return { value: pre.value + next.value }
      }, { value: 0 })
      this.categoryData = data[0].map(item => {
        const percent = pct((item.value / totalCategory.value).toFixed(4))
        return {
          ...item,
          percent,
          name: item.legendname + ' | ' + percent
        }
      })
      this.goodsData = data[1].map(item => {
        const percent = pct((item.value / totalGoods.value).toFixed(4))
        return {
          ...item,
          percent,
          name: item.legendname + ' | ' + percent
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;
    width: 50%;
    box-sizing: border-box;

    &:first-child {
      padding: 0 10px 0 0;
    }

    &:last-child {
      padding: 0 0 0 10px;
    }

    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;

      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }

    .chart-wrapper {
      display: flex;
      flex-direction: column;
      height: 452px;

      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;

        .chart {
          flex: 1;
          padding: 0 10px;

          .chart-title {
            color: #999;
            font-size: 14px;
          }

          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }

          .echarts {
            height: 50px;
          }
        }
      }

      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;

        .el-pagination {
          display: flex;
          justify-content: center;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
